<template>
  <div
    data-h-cxk-show
    class="news-show"
  >
    <div
      data-h-cxk-show
      class="box"
    >
      <div
        data-h-cxk-show
        class="newstop-1"
      >
        <p
          data-h-cxk-show
          class="red"
          @click="gonewsinfo(message0.hotid)"
        >
          <a
            data-h-cxk-show
            href=""
          >
            {{message0.title}}
          </a>
        </p>
        <img
          data-h-cxk-show
          :src="message0.img_url"
          alt=""
          @click="gonewsinfo(message0.hotid)"
        >
      </div>
      <div
        data-h-cxk-show
        class="newstop-2"
      >
        <p
          data-h-cxk-show
          class="p2 red"
          @click="gonewsinfo(message1.hotid)"
        >
          <a
            data-h-cxk-show
            href=""
          >{{message1.title}}</a>
        </p>
        <img
          data-h-cxk-show
          :src="message1.img_url"
          alt=""
          @click="gonewsinfo(message1.hotid)"
        >
      </div>
      <div
        data-h-cxk-show
        class="newstop-3"
      >
        <p
          data-h-cxk-show
          class="p2 red"
          @click="gonewsinfo(message2.hotid)"
        >
          <a
            data-h-cxk-show
            href=""
          >{{message2.title}}</a>
        </p>
        <img
          data-h-cxk-show
          :src="message2.img_url"
          alt=""
          @click="gonewsinfo(message2.hotid)"
        >
      </div>
    </div>
    <div
      data-h-cxk-show
      class="news-box"
      v-for="(item,index) in message"
      :key="index"
    >
      <div
        data-h-cxk-show
        class="news-pic"
      >
        <p
          data-h-cxk-show
          class="title red"
        ><a
            href=""
            @click="gonewsinfo(item.hotid)"
          >{{item.title}}</a> </p>
        <p
          data-h-cxk-show
          class="short-content"
        >{{item.title}}</p>
        <p
          data-h-cxk-show
          class="watch"
        ><span>猫眼电影 {{item.time}}</span>
          <span data-h-cxk-show>点击数{{item.watch}}</span></p>
      </div>
      <img
        data-h-cxk-show
        :src="item.img_url"
        alt=""
      >
    </div>

  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      message0: "",
      message1: "",
      message2: "",
      message: [],
    };
  },
  created() {
    this.getnews();
  },
  methods: {
    async getnews() {
      const {
        data: { message },
      } = await this.Api.hotspot.getnews();

      this.message0 = message[0];
      this.message1 = message[1];
      this.message2 = message[2];
      this.message = message;
    },
    gonewsinfo(id) {
      this.$router.push(`/hotspot/news/${id}`);
    },
  },
};
</script>

<style lang="less">
.red:hover[data-h-cxk-show] {
  color: #ef4238;
}
.news-show[data-h-cxk-show] {
  width: 750px;
  height: 1961px;
  .box[data-h-cxk-show] {
    width: 750px;
    height: auto;
    overflow: auto;
    img[data-h-cxk-show] {
      width: 100%;
      height: 100%;
    }
    p[data-h-cxk-show] {
      top: 80%;
      font-size: 20px;
      position: absolute;
      a[data-h-cxk-show] {
        color: white;
        text-decoration: none;
      }
    }
    p:hover[data-h-cxk-show] {
      color: #ef4238;
    }
    .p2[data-h-cxk-show] {
      top: 60%;
      font-size: 14px;
    }
    .newstop-1[data-h-cxk-show] {
      width: 500px;
      height: 314px;
      background-color: #333;
      float: left;
      position: relative;
    }
    .newstop-2[data-h-cxk-show] {
      width: 238px;
      height: 150px;
      float: right;
      background-color: rgb(128, 31, 31);
      position: relative;
    }
    .newstop-3[data-h-cxk-show] {
      width: 238px;
      height: 150px;
      margin-top: 14px;
      margin-bottom: 25px;
      float: right;
      background-color: rgb(12, 85, 61);
      position: relative;
    }
  }

  .news-box[data-h-cxk-show] {
    width: 750px;
    height: 176px;
    margin-bottom: 25px;
    background-color: rgb(255, 255, 255);
    img[data-h-cxk-show] {
      margin: 0px;
      margin-right: 20px;
      width: 238px;
      height: 150px;
    }
    .news-pic[data-h-cxk-show] {
      margin: 0px;
      width: 492px;
      height: 150px;
      float: right;
      p[data-h-cxk-show] {
        margin: 0px;
      }
      .title[data-h-cxk-show] {
        font-size: 18px;
        font-weight: 600;
        a {
          color: #333;
          text-decoration: none;
        }
      }
      .title:hover[data-h-cxk-show] {
        color: #ef4238;
      }
      .short-content[data-h-cxk-show] {
        width: 492px;
        height: 66px;
        font-size: 14px;
        color: #999;
        margin: 8px 0 16px;
        line-height: 22px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .watch[data-h-cxk-show] {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        margin-top: 35px;
      }
    }
  }
}
</style>